<template>
  <div>name: {{ person.name }} age: {{ person.age }}</div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    // 问题
    // 第一：模板当中都要进行 person. 取值，麻烦！
    // 第二：实际上来说，模板中只用到了 name 和 age，但是你却把整个 person 对象都导出了，没需要
    const person = reactive({
      name: '张三',
      age: 18,
      address: '河南',
      sex: '男',
    })
    return {
      person,
    }
  },
}
</script>
